import Vue from 'vue'
import VueRouter from 'vue-router'

// 静态加载、立马加载
// import Login from '@/views/Login'
// import Layout from '@/views/Layout'
// import Home from '@/views/Home'
// import Category from '@/views/Category'
// import Cart from '@/views/Cart'
// import My from '@/views/My'
// import GoodsDetail from '@/views/GoodsDetail'
// import Order from '@/views/Order'
// import GoodsList from '@/views/GoodsList'

import store from '@/store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({ showSpinner: false })

// 动态加载（路由懒加载）
const Login = () => import('@/views/Login')
const Layout = () => import('@/views/Layout')
const Home = () => import('@/views/Home')
const Category = () => import('@/views/Category')
const Cart = () => import('@/views/Cart')
const My = () => import('@/views/My')
const GoodsDetail = () => import('@/views/GoodsDetail')
const Order = () => import('@/views/Order')
const GoodsList = () => import('@/views/GoodsList')
const TestVModel = () => import('@/views/TestVModel')
const TestScopeSlot = () => import('@/views/TestScopeSlot')

Vue.use(VueRouter) // Vue.prototype.$router = xxx Vue.prototype.$route = yyy

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta: {
      title: '登录'
    }
    // beforeEnter: (to, from, next) => {
    //   // ...
    //   next()
    // }
  },
  {
    path: '/',
    name: 'Layout',
    component: Layout,
    redirect: '/home',
    meta: {
      title: '布局'
    },
    children: [
      {
        path: 'home',
        name: 'home',
        component: Home,
        meta: {
          title: '首页'
        }
      },
      {
        path: 'category',
        name: 'category',
        component: Category,
        meta: {
          title: '分类'
        }
      },
      {
        path: 'cart',
        name: 'cart',
        component: Cart,
        meta: {
          title: '购物车'
        }
      },
      {
        path: 'my',
        name: 'my',
        component: My,
        meta: {
          title: '我的',
          requiresAuth: true
        }
      }
    ]
  },
  {
    path: '/detail',
    component: GoodsDetail,
    meta: {
      title: '商品详情'
    }
  },
  {
    path: '/order',
    component: Order,
    meta: {
      title: '订单',
      requiresAuth: true
    }
  },
  {
    path: '/list',
    component: GoodsList
  },
  {
    path: '/other',
    component: () => import('@/views/Other')
  },
  {
    path: '/testvmodel',
    component: TestVModel
  },
  {
    path: '/testscopeslot',
    component: TestScopeSlot
  }
]

const router = new VueRouter({
  routes
  // scrollBehavior (to, from, savedPosition) {
  //   // return 期望滚动到哪个的位置
  //   return { x: 0, y: 0 }
  // }
})

/**
 * to 去哪里去
 * from 你从何而来
 * next 让你能往下继续
 */
// const rightRoute = ['/my', '/order']
/**
 * 进入到某个页面之前
 */
router.beforeEach((to, from, next) => {
  NProgress.start()
  // if (rightRoute.includes(to.path)) {
  if (to.meta?.requiresAuth) {
    // 进而判断，你是否登录了
    if (store.state.user.token) {
      // 登录了，直接放行
      next()
    } else {
      // 跳转到登录页面
      next('/login')
    }
  } else {
    // 直接放行
    next()
  }
})

router.afterEach((to, from) => {
  NProgress.done()
  // ...
  document.title = to.meta.title
})

export default router
